import { LockOutlined, UserOutlined } from '@ant-design/icons';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import { Alert } from 'antd';
import React from 'react';
import { useHistory } from 'react-router-dom';

import UserLayout from '@/layouts/UserLayout';
import UserModel from '@/models/user';
import { ILoginParams } from '@/services/user';

import styles from './index.module.less';

const LoginMessage: React.FC<{ content: string }> = ({ content }) => (
  <Alert
    style={{
      marginBottom: 24,
    }}
    message={content}
    type="error"
    showIcon
  />
);

const Login: React.FC = () => {
  const history = useHistory();
  const { login, submitting, loginMessage } = UserModel();

  return (
    <UserLayout>
      <div className={styles.main}>
        <ProForm
          onFinish={async (values: ILoginParams) => {
            await login(values);
            history.push('/home');
          }}
          submitter={{
            searchConfig: { submitText: '登录' },
            render: (_, dom) => dom.pop(),
            submitButtonProps: {
              loading: submitting,
              size: 'large',
              style: { width: '100%' },
            },
          }}>
          {loginMessage && <LoginMessage content={loginMessage} />}
          <ProFormText
            name="username"
            fieldProps={{
              size: 'large',
              prefix: <UserOutlined className={styles.prefixIcon} />,
            }}
            placeholder="请输入账号"
            rules={[{ required: true, message: '请输入账号!' }]}
          />
          <ProFormText.Password
            name="password"
            fieldProps={{
              size: 'large',
              prefix: <LockOutlined className={styles.prefixIcon} />,
            }}
            placeholder="密码"
            rules={[{ required: true, message: '请输入密码' }]}
          />
          <div style={{ marginBottom: 24 }}>
            <a>修改密码</a>
            <a className={styles.loginForget}>忘记密码</a>
          </div>
        </ProForm>
      </div>
    </UserLayout>
  );
};

export default Login;
